<template>
	<div class="detail">
    <div class="nav">
      <div class="left" @click="back">
            <span role="img" class="anticon">
              <u-icon name="arrow-leftward" color="#5468FF" size="42"></u-icon>
            </span>
      </div>
      <div class="content">账号详情</div>
      <div class="right"></div>
    </div>
    <div class="detail-content">
      <div class="detail-box-info">
        <div class="detail-header">
          <div class="left">
            <u-image :src="detail.category.image" alt="" width="36rpx" height="36rpx" style="margin-right: 16rpx"/>
            <span>{{ detail.area.name }} {{ detail.server ? detail.server.name : ''}}</span>
          </div>
          <div class="status_desc">{{ detail.status ? '已上架': '未上架'}}</div>
        </div>
        <div class="good-price">
          <div class="price">￥{{ detail.price }}</div>
        </div>
        <div class="good-desc">
          {{ detail.desc }}
        </div>
        <div class="good-desc2">
          <span>商品编号：{{ detail.id }}</span>
          <div class="create-time">上架时间：{{ detail.updated_time }}</div>
        </div>
      </div>
      <div class="detail-tabs">
        <div
            v-for="item in tagList"
            @click="activeTag = item"
            :class="['detail-tab', activeTag.id === item.id ? 'active' : '']">
          {{ item.name }}
        </div>
      </div>
      <div v-for="tag in activeTag.children">
        <div class="more-tag" >
          <div class="tag"></div>
          <div class="tag-name">{{ tag.name }}</div>
        </div>
        <u-row :gutter="16">
          <template v-for="item in tag.conditions">
            <u-col class="img-list" v-if="item.field_type === 'image'">
              <u-row gutter="16">
                <u-col :span="12/item.image_num" v-for="(img, index) in detail.condition[item.field_key]" :key="index">
                  <div class="img-item">
                    <u-image :src="img" mode="widthFix" @click="viewImage(img, detail.condition[item.field_key])"></u-image>
                  </div>
                </u-col>
              </u-row>
            </u-col>
            <u-col class="field-item" v-else :span="6">
              <span>{{ item.field_name }}：</span>
              <span>{{ detail.condition[item.field_key] }}</span>
            </u-col>
          </template>
        </u-row>
      </div>
    </div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
        detail: {
          category: {
            image: ''
          },
          area: {
            name: ''
          },
          condition: {

          }
        },
        activeTag: {},
        tagList: []
      }
		},
    onLoad({ id }) {
      this.$api.getGoodsDetail({id }).then(res => {
        let condition = {
        }
        try {
          condition = res.condition ? JSON.parse(res.condition) : []
        }
        catch (e) {
          console.log(e)
        }
        condition.game_img = res.image_desc.split(',')
        this.$api.getTagList({ category_id: res.category_id, }).then(conditionRes => {
          let conditionMap = {}
          let imageTag = [
            {
              id: 'xxxxx',
              name: '游戏截图',
              children: [
                {
                  id: 'xxxxx2',
                  name: '游戏截图',
                  conditions: [
                    {
                      field_key: 'game_img',
                      field_name: '游戏截图',
                      field_type: 'image',
                      image_num: 1
                    }
                  ]
                }
              ]
            }
          ]
          this.tagList = imageTag.concat(conditionRes.map(el => {
            return {
              ...el,
              children: el.children.map(el2 => {
                return {
                  ...el2,
                  conditions: el2.conditions.map(el3 => {
                    conditionMap[el3.field_key] = ''
                    let option = JSON.parse(el3.option)
                    if (el3.field_type === 'checkbox') {
                      let values = condition[el3.field_key]  || []
                      // 如果是string 分割成数组
                      if (typeof values === 'string') {
                        values = values.split(',')
                      }
                      console.log('values',values)
                      let values2 = values.map(el4 => {
                        const find = option.find(el5 => el5.value === el4)
                        if (find) {
                          return find.label
                        }
                        return el4
                      })
                      condition[el3.field_key] = values2.join(',')
                    } else {
                      const find = option.find(el4 => el4.value === condition[el3.field_key])
                      if (find) {
                        condition[el3.field_key] = find.label
                      }
                    }
                    return {
                      ...el3,
                      option
                    }
                  })
                }
              })
            }
          }))
          this.detail = {
            ...res,
            condition: {
              ...conditionMap,
              ...condition
            }
          }
          this.activeTag = this.tagList[0]
          console.log('this.tagList', this.tagList)
          console.log('this.detail', this.detail)
          console.log('this.activeTag', this.activeTag)
        })
      })
    },
		methods: {
      viewImage(img, imgList) {
        uni.previewImage({
          current: img,
          urls: imgList
        });
      },
      back() {
        uni.navigateBack({
          delta: 1
        });
      }
		}
	}
</script>

<style lang="scss">
.detail {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .detail-content {
    flex: 1;
    overflow: auto;
    margin: 20rpx 60rpx 30rpx;
    .field-list {
      display: flex;
      flex-wrap: wrap;
      .field-item {
        min-width: 50%;
        min-height: 60rpx;
        font-size: 28rpx;
        color: #344356;
        margin: 0;
      }
    }
    .img-item {
      border-radius: 30rpx;
      overflow: hidden;
    }
    .img-list {
    }
    .more-tag {
      display: flex;
      align-items: center;
      line-height: 36rpx;
      height: 36rpx;
      color: #344356;
      font-size: 32rpx;
      font-weight: 700;
      margin: 20rpx 0;
      .tag {
        display: inline-block;
        height: 36rpx;
        background: #5468ff;
        width: 8rpx;
        border-radius: 4rpx;
        margin-right: 20rpx;
      }
      .tag-name {
        color: #344356;
      }
    }
    .detail-tabs {
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
      overflow: auto;
      .detail-tab {
        flex-shrink: 0;
        background-color: #fff;
        margin-right: 16rpx;
        border-radius: 30rpx;
        line-height: 88rpx;
        height: 88rpx;
        font-size: 28rpx;
        padding: 0 60rpx;
        text-align: center;
        font-weight: 700;
        color: #c4c9cf;
        &.active {
          color: #344356;
        }
      }
    }
    .detail-box-info {
      padding: 30rpx;
      border-radius: 30rpx;
      background-color: #fff;
      .good-price {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 30rpx 0;
        font-weight: 700;
        .price {
          color: #ff4d4f;
          font-size: 36rpx;
          line-height: 44rpx;
          flex: 1;
          text-align: right;
        }
      }
      .good-desc {
        line-height: 40rpx;
        font-size: 28rpx;
        word-break: break-all;
        color: #344356
      }
      .good-desc2 {
        color: #c4c9cf;
        font-size: 24rpx;
        margin: 20rpx 0 0;
        display: flex;
        justify-content: space-between;
        .create-time {
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: keep-all;
          flex: auto;
          padding-left: 20rpx;
          text-align: right;
        }
      }
      .detail-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 40rpx;
        font-size: 28rpx;
        color: #344356;
        .left {
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .nav {
    width: 100%;
    box-sizing: border-box;
    padding: 0 30rpx 0 40rpx;
    height: 88rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .name {
    padding: 30rpx 30rpx 0 40rpx;
    color: #344356;
    font-weight: bold;
    font-size: 36rpx;
  }
}
.nav {
  width: 100%;
  box-sizing: border-box;
  padding: 40rpx 60rpx 0 40rpx;
  height: 128rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    width: 80rpx;
    font-size: 40rpx;
    color: #5468ff;
  }
  .content {
    flex: 6;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    color: #344356;
    font-weight: 700;
    font-size: 40rpx;
  }
  .right {
    flex: 1;
  }
}
</style>
